import Image from "next/image";
import styles from "./page.module.scss";

export default function Home() {
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        <div className="container">
          <Image
            className={styles.logo}
            src="/next.svg"
            alt="Next.js logo"
            width={180}
            height={40}
            priority
          />
          
          <div className={styles.intro}>
            <h1>Next.js 项目已成功初始化</h1>
            <p>
              这是一个使用 <strong>Next.js + SCSS + Heroicons</strong> 的现代化前端项目。
              开始开发您的应用吧！
            </p>
          </div>

          <div style={{ display: 'flex', gap: '2rem', margin: '3rem 0', flexWrap: 'wrap', justifyContent: 'center' }}>
            <div className="card">
              <div className="icon-placeholder blue"></div>
              <h3>TypeScript 支持</h3>
              <p>使用类型安全的代码编写更好的应用</p>
            </div>
            <div className="card">
              <div className="icon-placeholder green"></div>
              <h3>SCSS 样式</h3>
              <p>使用 SCSS 编写模块化、可维护的样式</p>
            </div>
            <div className="card">
              <div className="icon-placeholder purple"></div>
              <h3>现代构建工具</h3>
              <p>使用最新的 Next.js 构建优化工具</p>
            </div>
            <div className="card">
              <div className="icon-placeholder orange"></div>
              <h3>部署简单</h3>
              <p>轻松部署到 Vercel 等平台</p>
            </div>
          </div>

          <div className={styles.ctas}>
            <a
              className={styles.primary}
              href="https://nextjs.org/docs"
              target="_blank"
              rel="noopener noreferrer"
            >
              查看文档
            </a>
            <a
              className={styles.secondary}
              href="https://nextjs.org/learn"
              target="_blank"
              rel="noopener noreferrer"
            >
              开始学习
            </a>
          </div>
        </div>
      </main>
    </div>
  );
}
